@pickerPrefixCls: rmc-picker;
@multiPickerPrefixCls: rmc-multi-picker;
@picker-item-height: 0.34rem;

.@{pickerPrefixCls} {
  display: block;
  position: relative;
  overflow: hidden;
  height: 2.38rem;

  &-content {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    z-index: 1;
    padding: 1.02rem 0;
  }

  &-mask {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6)),
    -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6));
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6)),
    linear-gradient(to top, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6));
    background-position: top, bottom;
    background-size: 100% 1.02rem;
    background-repeat: no-repeat;
  }

  &-item {
    text-align: center;
    font-size: 0.28rem;
    line-height: @picker-item-height;
    height: @picker-item-height;
    color: #000;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  &-indicator {
    right: 0;
    position: absolute;
    left: 0;
    top: 1.02rem;
    height: @picker-item-height;
    z-index: 3;
    background-image: -webkit-linear-gradient(top, #d0d0d0, #d0d0d0, transparent, transparent),
    -webkit-linear-gradient(bottom, #d0d0d0, #d0d0d0, transparent, transparent);
    background-image: linear-gradient(to bottom, #d0d0d0, #d0d0d0, transparent, transparent),
    linear-gradient(to top, #d0d0d0, #d0d0d0, transparent, transparent);
    background-position: top, bottom;
    background-size: 100% 1px;
    background-repeat: no-repeat;
  }
}

.@{multiPickerPrefixCls} {
  display: flex;
  align-items: center;
  padding: 0.1px 0;

  &-item {
    flex: 1;
    text-align: center;
  }
}